﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LeafItem.aspx.cs" Inherits="LeafItem" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">

        body { font-family: Segoe UI; background-color: black; color: white; }
        .Groupfloating { float: left; }
            .Groupfloating img { display: block; margin-top: 10px; margin-bottom: 10px; height: 270px; width: 558px; margin-right: 10px; }
        .GroupThumbImage { float: left; }
            .GroupThumbImage img { display: block; margin-top: 10px; height: 150px; width: 150px; margin-right: 10px; }
        .pageHeader { font-family: Segoe UI Light; font-size: 42pt; }
        .pageSubHeader { font-family: Segoe UI Light; font-size: 20pt; }
        a { text-decoration: none; color: #4b8588; }
        p { font-family: Segoe UI; font-size: 11pt; }
            p .tagTitle { font-family: Segoe UI; font-size: 9pt; color: gray; }
        img:hover { background-color: #bfcbd6; color: #465c71; text-decoration: none; }
        ul { list-style-type: none; font-family: Segoe UI; font-size: 11pt; }
        .txt { width: 300px; border: 1px solid gray; height: 26px; margin-top: 2px; margin-left: 2px; }
        #container { overflow-x: scroll; overflow-y: hidden; padding-bottom: 10px; }
        #WebcamHolder { position: absolute; bottom: 110px; }
        #cmpLayout { float: left; width: 262px; height: 400px; padding: 10px; }
        #presentation { float: left; width: 470px; height: 400px; padding: 10px; }
        #presentationContent { width: 471px; height: 295px; }
        #chatBox { position:absolute; left: 304px; bottom: -273px; width: 470px; height: 81px; padding: 10px; background-color: #f0f0f0; }
    </style>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function adaptSize() {
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            $("#container").height(windowHeight - 200);
        }

        $(document).ready(function () {
            adaptSize();

            $("#layoutHeader").mousedown(function (event) {
                if (event.which == 1) {
                    $("#cmpLayout").hide("slide", "swing");
                    $("#presentation").width(732).height(532);
                    $("#presentationContent").width(740).height(540);
                }
            });

        });
        $(window).resize(adaptSize);


        function hasGetUserMedia() {
            // Note: Opera is unprefixed.
            return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
                      navigator.mozGetUserMedia || navigator.msGetUserMedia);
        }

        if (hasGetUserMedia()) {
            // Good to go!
        } else {
            alert('getUserMedia() is not supported in your browser');
        }

        $("#layoutHeader").click(function () {
           
            $("#cmpLayout").fadeOut("slow", "swing");
            $("#presentation").width(732).height(532);
            $("#presentationContent").width(740).height(540);
            
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="pageHeader" style="margin-left: 50px; margin-top: 20px;">
            <a href="Home.aspx">
                <img src="Resources/back.png" style="height: 42px; margin-right: 30px;" /></a><asp:Label ID="lblGroupName" runat="server">Professional Training</asp:Label>
        </div>
        <div id="container">
            <div style="width: 200%; height: 410px; margin-top: 10px; padding: 10px;">
                <div id="cmpLayout">
                    <div id="layoutHeader" class="pageSubHeader">
                        CPA
                    </div>
                    <div>
                        <p style="font-weight: 400;">Certfied Public Accountant</p>
                    </div>
                    <div style="height: 162px; width: 257px;">
                        <ul>
                            <li><a href="#">Introduction </a>2:45</li>
                            <li><a href="#">Auditing </a>2:26</li>
                            <li><a href="#">Regulation </a>2:56</li>
                            <li><a href="#">Financial Accounting </a>3:45 </li>
                            <li><a href="#">Business Enviroment </a></li>
                        </ul>
                    </div>
                    <div id="WebcamHolder">
                        <video autoplay width="320" height="240"></video>
                        <script>
                            var onFailSoHard = function (e) {
                                console.log('Reeeejected!', e);
                            };

                            window.URL = window.URL || window.webkitURL;
                            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                                                      navigator.mozGetUserMedia || navigator.msGetUserMedia;

                            // Not showing vendor prefixes.
                            navigator.getUserMedia({ video: true, audio: true }, function (localMediaStream) {
                                var video = document.querySelector('video');
                                video.src = window.URL.createObjectURL(localMediaStream);

                                // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
                                // See crbug.com/110938.
                                video.onloadedmetadata = function (e) {
                                    // Ready to go. Do some stuff.
                                };
                            }, onFailSoHard);
                        </script>
                    </div>
                </div>
                <div id="presentation">
                    <div style="margin-bottom: 4px">
                        <embed id="presentationContent"
                            src="http://www.youtube.com/v/CucP0TqAO5I"
                            type="application/x-shockwave-flash" />
                    </div>
                    
                </div>
                <div id="chatBox">Chat Place Holder</div>
                <div style="float: left; width: 250px; height: 400px; padding: 10px;">
                    <div>
                        <textarea style="width: 247px; height: 318px;"></textarea>
                    </div>
                    <div style="margin-left: 10px">
                        <asp:Button runat="server" ID="addGroup" Text="ADD"
                            CssClass="txt" Width="70px" />
                    </div>
                </div>

                <div style="float: left; width: 250px; height: 400px; padding: 10px;">
                    <div class="pageSubHeader">
                        Document<asp:Button runat="server" ID="Button1" Text="ADD"
                            CssClass="txt" Width="116px" />
                    </div>
                    <div style="height: 162px; width: 257px;">
                        <ul>
                            <li><a href="#">Fundamentals</a> PDF 123KB</li>
                            <li><a href="#">Self-test Exercises</a> PDF 54KB</li>
                            <li><a href="#">Regulations</a> Word 1.2MB</li>
                        </ul>
                    </div>
                </div>

                <div style="float: left; width: 350px; height: 400px; padding: 10px;">
                    <div style="margin-bottom: 10px;">
                        <div class="pageSubHeader">Introduction</div>
                        <div>General Assembly on Tuesday, said that time was running out for diplomacy with Iran. Mr. Obama also spoke on the recent attacks on American Embassies.</div>
                    </div>

                    <div style="margin-bottom: 10px;">
                        <div class="pageSubHeader">Auditing</div>
                        <div>No other number attracts such a fevered following as the golden ratio. Approximately equal to 1.618 and denoted by the Greek letter phi, it’s been canonized as the “Divine Proportion.” Its devotees will tell you it’s ubiquitous in nature, art and architecture. And there are plastic surgeons and financial mavens who will tell you it’s the secret to pretty faces and handsome returns.

Not bad for the second-most famous irrational number. In your face, pi!
                        </div>
                    </div>
                    <div style="margin-bottom: 10px;">
                        <div class="pageSubHeader">Regulation</div>
                        <div>
                            It even made a cameo appearance in “The Da Vinci Code.” While trying to decipher the clues left at the murder scene in the Louvre that opens the novel, the hero, Robert Langdon, “felt himself suddenly reeling back to Harvard, standing in front of his ‘Symbolism in Art’ class, writing his favorite number on the chalkboard. 1.618.”

Langdon tells his class that, among other astonishing things, da Vinci “was the first to show that the human body is literally made of building blocks whose proportional ratios always equal phi.”
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="overflow-x: scroll; overflow-y: hidden; padding-bottom: 10px;">
            <div style="width: 260%; height: auto;">                
                <div style="float: left; margin-left: 10px;">
                    <img src="ThumbPath/1.jpg" height="70px" width="100px" /></div>
                <div style="float: left; margin-left: 10px;">
                    <img src="image/panorama.jpg" height="70px" /></div>
                
            </div>
        </div>
    </form>
</body>
</html>
